<template>
    <div id="app">
        <router-view/>
        <!-- <img src="./assets/logo.png"> -->
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {},
        created() {
            //在页面加载时读取sessionStorage里的状态信息
            if (localStorage.getItem("store")) {
                this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("store"))));
            }
            //在页面刷新之前将vuex里的信息保存到sessionStorage里
            window.addEventListener("beforeunload", () => {
                // debugger
                localStorage.setItem("store", JSON.stringify(this.$store.state));
            })
        },
        watch: {
            $route(to, from){
                // this.$store.commit('SET_AACTIVE_ROUTER', item.path);
            },
        }
    }
</script>

<style lang="scss">
    #app {
        height: 100%;
        width: 100%;
        text-align: left;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* text-align: center; */
        color: #2c3e50;
        /* margin-top: 60px; */
    }
    .el-scrollbar__wrap{
        overflow-x: auto;
        height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
    }
    .el-header,
    .el-footer {
        background-color: #b3c0d1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: white;
        color: #333;
        /*text-align: center;*/
        line-height: 200px;
    }

    .el-main {
        background-color: #e9eef3;
        color: #333;
        /*text-align: center;*/
        /*line-height: 160px;*/
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .sidebar {
        background: white;
        text-align: left;
    }

    .ctl_btn {
        line-height: 40px;
    }
    .el-menu-vertical-demo{
        padding-bottom: 20px;
        .el-menu-item-group__title{
            display: none !important;
        }
    }
</style>
